<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<body>
<div id="app">


<form name="f1" >

    <table align="center" border="1" width="80%"  class="table table-hover table-bordered">
        <tr>
            <td>编号</td>
            <td>用户类型</td>
            <td>账号</td>
            <td>用户名</td>
            <td>创建时间</td>
            <td>创建人ID</td>

        </tr>
            <tr v-for="(item,index) in users">
            <td v-text="item.id"></td>
            <td v-text="item.sysRoles.roleName"></td>
            <td v-text="item.account"></td>
            <td v-text="item.userName"></td>
            <td v-text="item.createtime"></td>
            <td v-text="1"></td>
        </tr>
    </table>
    <div >
        <nav aria-label="Page navigation example" class="d-flex justify-content-center">
            <div>

                <ul class="p pagination" style="list-style: none;">
                    <li style="display: inline;"> 当前第<input  v-model="pageInfo.pageNum" style="width: 30px;text-align: center;"/>
                        页/{{pageInfo.pages}}</li>
                    <li class="page-item " :class="{disabled:pageInfo.isFirstPage}"  style="display: inline;">
                        <a class="page-link" href="javascript:;"  @click="goto(pageInfo.pageNum-1)" >上一页</a></li>
                    <li v-for="(item,index) in pageInfo.navigatepageNums" class="page-item"
                        :class="{active:item==pageInfo.pageNum}"  style="display: inline;">
                        <a class="page-link" href="javascript:;"
                           @click="goto(item)">{{item}}</a>
                    </li>
                    <li class="page-item" :class="{disabled:pageInfo.isLastPage}"  style="display: inline;"><a class="page-link"
                                                                                     href="javascript:;"  @click="goto(pageInfo.pageNum+1)">下一页</a></li>
                </ul>
            </div>

        </nav>
    </div>
</form>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{

            users:[],  //用户集合属性
            user:{      //用来传递的参数对象
                pageNum:1,
                pageSize:1,

            },
            pageInfo:''  //分页信息对象
        },
        methods:{
            goto(num){
                this.user.pageNum=num;
                $.getJSON({

                        type: "GET",  //提交类型必须与服务器要求的一致
                        url: "user!queryall",   //远程服务器接口的地址请求后端
                        data: this.user,                           //传递的参数
                        success: function (json) {
                            console.log(JSON.stringify(json))
                            app.pageInfo=json[0];  //获取服务器的分页json对象
                            app.users=json[1];  //获得服务器里面的集合
                        }
                 });
            }
        },mounted(){
            //从服务器拿数据
           this.goto(1);
        }
    });

</script>
</body>
</html>
